<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet/less" href="./css/reset.less">

  <link rel="stylesheet/less" href="./css/index.less">
  <link rel="stylesheet/less" href="./css/common.less">
</head>

<body>
  <!-- todo header -->
  <div class="header">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand logo" href="#">Spirit8</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false">

          <!-- todo 右侧导航栏 -->
          <ul class="nav navbar-nav navbar-right right-nav">
            <li><a href="#">HOME</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">testimonials</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </div>

  <!-- todo banner -->
  <div id="banner" class="autorow">
    <div class="row">
      <video autoplay loop muted id="video" class="col-md-12 col-sm-12 col-xs-12">
        <source src="images/banner.mp4" />
      </video>
      <div class="content">
        <!-- todo 44px -->
        <p class="text-up center">
          WELCOME on
          <b>spirit8</b>
        </p>
        <!-- todo 20px -->
        <p class="center">
          We are a digital agency with
          <b>years of experience</b> and with <b>extraordinary people</b>
        </p>
      </div>
      <img src="./images/more.png" alt="" class="down">
    </div>
  </div>

  <!-- todo about -->
  <div id="about" class="autorow">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <img src="./images/about-background.png" alt="" class="computer">
        </div>
        <div class="content col-md-6 col-sm-12  col-xs-12">
          <!-- ! 20px -->
          <p>ABOUT US</p>
          <!-- ! 34px -->
          <p class="p2">Some words <span class="text-up">about us</span></p>
          <!-- !18px -->
          <p>We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration,
            we brand companies in a way they will never forget.</p>
          <!-- ! items  -->
          <ul class="items">
            <li class="item">
              <div class="img">
                <img src="./images/about-list-bg.png" alt="">
              </div>
              <p> <span>Mission</span> - We deliver uniqueness and quality</p>
            </li>
            <li class="item">
              <div class="img">
                <img src="./images/about-list-bg.png" alt="">
              </div>
              <p> <span>Skills</span> - Delivering fast and excellent results</p>
            </li>
            <li class="item">
              <div class="img">
                <img src="./images/about-list-bg.png" alt="">
              </div>
              <p> <span>Clients</span> - Satisfied clients thanks to our experience</p>
            </li>
          </ul>
          <!-- ! btn -->
          <a class="btn">
            <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            Browse our work
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- todo team -->
  <div id="team" class="autorow">
    <div class="title text-up center autorow">
      Meet <b>our team</b>
    </div>
    <div class="content container">
      <ul class="row items">

        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle"></div>
            <div class="name ">
              <b>Jason Statham</b>
              <p>Knife designer</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>
        </li>

        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle"></div>
            <div class="name ">
              <b>Jason Statham</b>
              <p>Knife designer</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>
        </li>
        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle"></div>
            <div class="name ">
              <b>Jason Statham</b>
              <p>Knife designer</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>
        </li>
        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle"></div>
            <div class="name ">
              <b>Jason Statham</b>
              <p>Knife designer</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>
        </li>
      </ul>
    </div>
    <ul class="page">
      <li class="item">
        <a href="javascript:;"></a>
      </li>
      <li class="item">
        <a href="javascript:;"></a>
      </li>
      <li class="item">
        <a href="javascript:;"></a>
      </li>
    </ul>
  </div>

  <!-- todo services -->
  <div id="services">
    <div class="title text-up center autorow">
      take a look at <b>our services</b>
    </div>
    <div class="text container">
      Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
      Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
      Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </div>
    <div class="content container">
      <ul class="row items">
        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle">
              <i class="fa fa-desktop" aria-hidden="true"></i>
            </div>
            <div class="name ">
              <p>Web design</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
          </div>
        </li>
        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle">
              <i class="fa fa-desktop" aria-hidden="true"></i>
            </div>
            <div class="name ">
              <p>Web design</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
          </div>
        </li>
        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle">
              <i class="fa fa-desktop" aria-hidden="true"></i>
            </div>
            <div class="name ">
              <p>Web design</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
          </div>
        </li>
        <li class="item col-md-3 col-sm-6 col-xs-12 center">
          <!-- ! 头部 -->
          <div class="avatar">
            <div class="circle">
              <i class="fa fa-desktop" aria-hidden="true"></i>
            </div>
            <div class="name ">
              <p>Web design</p>
            </div>
          </div>
          <!-- ! 内容 -->
          <div class="user-about">
            <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- todo clients  -->
  <div id="clients" class="autorow">
    <div class="title text-up center autorow">
      SOME OF<b> OUR CLIENTS</b>
    </div>
    <div class="content">
      <img src="./images/logos.png" alt="" class="c-img">
    </div>
    <ul class="page">
      <li class="item">
        <a href="javascript:;"></a>
      </li>
      <li class="item">
        <a href="javascript:;"></a>
      </li>
      <li class="item">
        <a href="javascript:;"></a>
      </li>
    </ul>
  </div>

  <!-- todo work -->
  <div id="work" class="autorow">
    <div class="title text-up center autorow">
      take a look at <b>our work</b>
    </div>
    <div class="text container">
      Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
      Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
      Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </div>
    <div class="content container">
      <div class="nav row">
        <div class="name col-md-6 col-sm-12 col-xs-12">Filter by type</div>
        <ul class="items col-md-6 col-sm-12 col-xs-12">
          <li class="item">
            <a href="javascript:;">All</a>
          </li>
          <li class="item">
            <a href="javascript:;">Web design</a>
          </li>
          <li class="item">
            <a href="javascript:;">Mobile design</a>
          </li>
          <li class="item">
            <a href="javascript:;">Photograpy</a>
          </li>
        </ul>
      </div>

      <ul class="row witems center-block">
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>
      </ul>

      <ul class="row witems center-block">
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>
      </ul>

      <ul class="row witems center-block">
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>
      </ul>

      <ul class="row witems center-block">
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="witem">
            <img src="./images/work-img.png" alt="" >

            <div class="wbg">
              <b class="text-up">Trend and fashion</b>
              <p>Website design</p>
              <a href="javascript:;">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>
            </div>

          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- todo ceo  -->
  <div id="ceo">
    <div class="title text-up center autorow">
      <!-- !44px -->
      <b>our clients’ </b>testimonials
    </div>
    <!-- !18px -->
    <div class="text container">
      This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
      Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </div>

    <div class="content center">
      <b>Dean Martin,</b> CEO Acme Inc.
    </div>

    <ul class="page">
      <li class="item">
        <a href="javascript:;"></a>
      </li>
      <li class="item">
        <a href="javascript:;"></a>
      </li>
      <li class="item">
        <a href="javascript:;"></a>
      </li>
    </ul>
  </div>

  <!-- todo contact -->
  <div id="contact">
    <div class="title text-up center autorow">
      <b>feel free to </b>contact us
    </div>
    <div class="text container">
      Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
      Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
      Renaissance.
    </div>

    <div class="content container">
      <div class="row name-email">
        <div class="citem col-md-6 col-sm-6 col-xs-12">
            <p class="ctitle">Name<span>*</span> </p>
            <input type="text" class="form-control" aria-describedby="basic-addon1">
        </div>
        <div class="citem col-md-6 col-sm-6 col-xs-12">
          <p class="ctitle">Email Address<span>*</span> </p>
          <input type="text" class="form-control" aria-describedby="basic-addon1">
        </div>
      </div>

      <div class="row message">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <p class="ctitle">message<span>*</span> </p>
          <textarea class="form-control"></textarea>
        </div>
      </div>

      <div class="row send">
        <div class="col-md-12">
          <button type="button text-up" class="btn btn-warning">send</button>
        </div>
      </div>
    </div>
  </div>

  <!-- todo footer -->
  <footer class="autorow">
    <div class="container">
      <div class="row">
        <div class="text col-md-6 col-sm-6 col-xs-12">
          ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8
        </div>
        <div class="share col-md-6 col-sm-6 col-xs-12">
          <img src="./images/share_03.png" alt="">
        </div>
      </div>
    </div>
  </footer>



  <script src="./js/less.min.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
</body>

</html>